<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull @resize="onResize">
			<template #head>
				<cl-title-module
					title="本月每日报表"
					sub-title="以每日为单位进行汇总（当前登陆账号）"
					:columns="initColumns"
					:print="printParams"
					v-model="tableData.columns"
					@export-file="exportExcel"
				/>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 230px"
								:clearable="false"
							/>
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<cl-table v-bind="tableData" id="monthDayReport"> </cl-table>
		</cl-pagefull>
	</cl-crud>
</template>
<script>
import { mapGetters } from "vuex";
import { exportExcel } from "@/utils/excel";
import { cloneDeep } from "cl-admin/utils";
import dayjs from "dayjs";
export default {
	data() {
		return {
			printParams: {
				id: "monthDayReport",
				popTitle: "本月每日报表"
			},
			// 表格配置
			tableData: {
				"context-menu": ["refresh"],
				sortRefresh: false,
				columns: [],
				props: {
					showSummary: true,
					summaryMethod: this.getSummaries,
					maxHeight: 500
				}
			},
			initColumns: [
				{ label: "日期", prop: "date", sortable: true, minWidth: 120, disable: true },
				{ label: "行为数", prop: "action", sortable: true, minWidth: 120 },
				{ label: "加微数", prop: "wechat", sortable: true, minWidth: 130 },
				{
					label: "加微率",
					prop: "wechat_rate",
					sortable: true,
					minWidth: 120
				},
				{
					label: "定金数",
					prop: "deposit",
					sortable: true,
					minWidth: 120
				},
				{ label: "定金人数", prop: "deposit_person", sortable: true, minWidth: 120 },
				{
					label: "退定金数",
					prop: "deposit_refuse_num",
					sortable: true,
					minWidth: 120
				},
				{
					label: "退定金人数",
					prop: "deposit_refuse_person",
					sortable: true,
					minWidth: 120
				},
				{
					label: "定金率",
					prop: "deposit_rate",
					sortable: true,
					minWidth: 120
				},
				{ label: "推送数", prop: "deposit_push", sortable: true, minWidth: 120 },
				{ label: "接收数", prop: "deposit_get", sortable: true, minWidth: 120 },
				{ label: "拒接数", prop: "deposit_refuse", sortable: true, minWidth: 120 },
				{ label: "到店人头数", prop: "arrive_person", sortable: true, minWidth: 120 },
				{
					label: "到店业绩（￥）",
					prop: "achieve",
					sortable: true,
					minWidth: 150
				},
				{
					label: "新客到店业绩（￥）",
					prop: "new_achieve",
					sortable: true,
					minWidth: 200
				},
				{
					label: "老转新到店业绩（￥）",
					prop: "oldnew_achieve",
					sortable: true,
					minWidth: 200
				},
				{
					label: "到店客单（￥）",
					prop: "achieve_rate",
					sortable: true,
					minWidth: 150
				}
			],
			search: {
				date: [
					dayjs()
						.startOf("day")
						.format("YYYY-MM-DD"),
					dayjs()
						.endOf("day")
						.format("YYYY-MM-DD")
				],
				bra_id: []
			}
		};
	},
	computed: {
		bizRefData() {
			let biz_id = this.getCurrBiz();
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.init();
		this.tableData.columns = cloneDeep(this.initColumns);
	},
	methods: {
		init() {
			let biz_id = this.getCurrBiz();
			this.getBizRefBrand(biz_id);
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.preSale)
				.set("dict", {
					api: {
						page: "presalemonday"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		onResize(h) {
			this.tableData.props.maxHeight = h;
		},
		// 表格合计
		getSummaries({ columns, data }) {
			let wechatSum = 0,
				actionSum = 0,
				depositSum = 0;
			return columns.map((column, index) => {
				if (index === 0) {
					return "合计";
				}
				if (column.property === "deposit_rate") {
					if (wechatSum) {
						let result = depositSum / wechatSum;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				if (column.property === "wechat_rate") {
					if (actionSum) {
						let result = wechatSum / actionSum;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				const values = data.map(item => Number(item[column.property]));
				let sum = values.reduce((prev, curr) => {
					const value = Number(curr);
					if (!isNaN(value)) {
						return prev + curr;
					}
					return prev;
				}, 0);
				if (column.property === "wechat") {
					wechatSum = sum;
				}
				if (column.property === "deposit") {
					depositSum = sum;
				}
				if (column.property === "action") {
					actionSum = sum;
				}
				return this.toFixed(sum);
			});
		},
		// 导出EXCEl
		exportExcel() {
			exportExcel("#monthDayReport");
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-table--scrollable-x {
		.el-table__body-wrapper {
			z-index: 2;
		}
	}
}
</style>
